<template>
    <div>
        <div class="veri_box">
            <div style="font-size: 0.8125rem;">
                为了保护您的账户安全，需要验证手机
            </div>
            <div class="iphone">
                {{ phone | noPassByMobile }}
            </div>
            <div class="veri_box_code">
                <input type="text" placeholder="请输入验证码" v-model="code" @input="changeauthCd" maxlength="6">

                <span @click="getCode" v-if="sending == false" class="span1">获取验证码</span>
                <span v-else class="span2">重新发送({{ time }})</span>
                <!-- <span>发送验证码</span> -->
            </div>
        </div>
        <div class="affirmBtn" @click="next">
            下一步
        </div>

    </div>

</template>
<script>
import { sendPhoneCode, login } from '@/api/api'
import { setToken } from "@/api/auth";
export default {
    components: {

    },
    data() {
        return {
            phone: window.localStorage.getItem("phone"),
            code: "",
            sending: false,
            time: 60,
            myreg: /^[1][3,4,5,6,7,8,9][0-9]{9}$/,
        }
    },
    methods: {
        getCode() {
            const data = {
                phone: this.phone,
                type: "CODE"
            }
            sendPhoneCode(data).then(res => {
                if (res.code == 200) {
                    this.sending = true
                    this.countDown()
                }
            })

        },
        changeauthCd() {
            if (this.code.length > 6) {
                this.code = this.code.slice(0, 6)
            }
        },
        // 倒计时方法
        countDown() {
            if (this.time === 0) {
                this.sending = false
                this.time = 60
                return
            } else {
                this.sending = true;
                this.time--
            }
            setTimeout(() => {
                this.countDown()
            }, 1000)
        },
        next() {
            const data = {
                phone: this.phone,
                code: this.code
            }
            login(data).then(res => {
                if (res.code == 200) {
                    this.$vux.toast.show("验证成功")
                    setToken(res.data.token)
                    window.localStorage.setItem("phone", this.phone)
                    this.$router.push({ path: "/changepwdnext" })
                }
            })
            // this.$router.push({ path: "/changepassword" })
        },
    },
    filters: {
        // 星号处理手机号
        noPassByMobile(str) {
            if (null != str && str != undefined) {
                var pat = /(\d{3})\d*(\d{4})/;
                return str.replace(pat, '$1****$2');
            } else {
                return "";
            }
        },
    }
}
</script>
<style scoped>
.veri_box {
    margin-top: 3.9375rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-flow: column;
}

.veri_box .iphone {
    margin: 1.875rem;
    color: #A4ADBE;

}

.veri_box_code {
    width: 14.75rem;
    height: 3.0625rem;
    background: rgba(247, 250, 253, 1);
    border-radius: 0.25rem;
    font-size: 0.9375rem;
    padding: 0px 0.625rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.veri_box_code>input {
    border: none;
    width: calc(100% - 7.5rem);
    display: inline-block;
    height: 2.625rem;
    font-size: 0.9375rem;
    outline: none;
    background-color: #F7FAFD;
    margin-right: 0.3125rem;
}

.veri_box_code>span {
    color: #579AFF;
}

.veri_box_code .span2 {
    /* border: 1px solid #949FB4; */
    color: #949FB4;

}

.affirmBtn {
    width: calc(100% - 2rem);
    height: 2.75rem;
    background: linear-gradient(90deg, rgba(68, 142, 255, 1) 0%, rgba(102, 163, 255, 1) 100%);
    border-radius: 0.1875rem;
    text-align: center;
    line-height: 2.75rem;
    color: #fff;
    font-size: 1.125rem;
    margin: 0px 1rem;
    margin-top: 5.0625rem;
}
</style>